<template>
  <div class="visitors">
    <!-- 顶部静态图片 -->
    <div class="static-banner" v-if="carouselData.length > 0">
      <div class="banner-item">
        <img :src="carouselData[0].image" alt="banner" class="banner-img" />
        <div class="banner-overlay">
          <div class="container">
            <div class="banner-content">
              <h1 class="banner-title">{{ carouselData[0].title }}</h1>
              <p class="banner-subtitle" v-if="carouselData[0].subtitle">
                {{ carouselData[0].subtitle }}
              </p>
              <p class="banner-description" v-if="carouselData[0].description">
                {{ carouselData[0].description }}
              </p>
              <el-button
                v-if="carouselData[0].buttonText"
                type="primary"
                size="large"
                @click="handleCarouselAction(carouselData[0].action)"
              >
                {{ carouselData[0].buttonText }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页面头部（当没有轮播图时显示） -->
    <div class="page-header" v-else>
      <div class="container">
        <h1 class="page-title">观众中心</h1>
        <p class="page-subtitle">为专业观众提供全方位的参观服务</p>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="visitor-nav">
          <a
            @click="setActiveTab('group-visit')"
            :class="['nav-item', { active: activeTab === 'group-visit' }]"
            >组团观展</a
          >
          <a
            @click="setActiveTab('visitor-registration')"
            :class="[
              'nav-item',
              { active: activeTab === 'visitor-registration' },
            ]"
            >观众注册</a
          >
          <a
            @click="setActiveTab('visitor-system')"
            :class="['nav-item', { active: activeTab === 'visitor-system' }]"
            >观众须知</a
          >
          <a
            @click="setActiveTab('visa-system')"
            :class="['nav-item', { active: activeTab === 'visa-system' }]"
            >签证系统</a
          >
          <a
            @click="setActiveTab('exhibitors-directory')"
            :class="[
              'nav-item',
              { active: activeTab === 'exhibitors-directory' },
            ]"
            >展品商城</a
          >
          <a
            @click="setActiveTab('visitor-reviews')"
            :class="['nav-item', { active: activeTab === 'visitor-reviews' }]"
            >观众评价</a
          >
        </nav>
      </div>
    </div>

    <div class="container">
      <!-- 组团观展 -->
      <section
        id="group-visit"
        class="visitor-section"
        v-if="activeTab === 'group-visit'"
      >
        <h2 class="section-title">组团观展</h2>
        <div class="group-content">
          <div class="group-info">
            <h3>团体参观服务</h3>
            <p>
              为团体观众提供专业的参观服务，包括交通安排、住宿推荐、商务对接等全方位支持。
            </p>
            <div class="group-benefits">
              <div class="benefit-item">
                <el-icon><Van /></el-icon>
                <span>专车接送</span>
              </div>
              <div class="benefit-item">
                <el-icon><House /></el-icon>
                <span>住宿安排</span>
              </div>
              <div class="benefit-item">
                <el-icon><Connection /></el-icon>
                <span>商务对接</span>
              </div>
              <div class="benefit-item">
                <el-icon><Star /></el-icon>
                <span>专属服务</span>
              </div>
            </div>
          </div>
          <div class="group-actions">
            <div class="group-description">
              <h4>申请流程</h4>
              <ul>
                <li>填写团体信息和需求</li>
                <li>提交申请等待审核</li>
                <li>确认参观安排</li>
                <li>享受专属服务</li>
              </ul>
            </div>
            <div class="action-buttons">
              <el-button
                type="primary"
                size="large"
                @click="$router.push('/group-visit')"
              >
                <el-icon><Edit /></el-icon>
                立即申请组团观展
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 观众预登记 -->
      <section
        id="visitor-preregistration"
        class="visitor-section"
        v-if="activeTab === 'visitor-registration'"
      >
        <h2 class="section-title">观众预登记</h2>
        <div class="preregistration-content">
          <div class="preregistration-info">
            <h3>免费预登记</h3>
            <p>
              提前预登记可享受更多参观便利，包括快速入场、专属服务、商务对接等特权。
            </p>
            <div class="preregistration-benefits">
              <div class="benefit-item">
                <el-icon><Clock /></el-icon>
                <span>快速入场</span>
              </div>
              <div class="benefit-item">
                <el-icon><Star /></el-icon>
                <span>专属服务</span>
              </div>
              <div class="benefit-item">
                <el-icon><Connection /></el-icon>
                <span>商务对接</span>
              </div>
              <div class="benefit-item">
                <el-icon><Present /></el-icon>
                <span>精美礼品</span>
              </div>
            </div>
          </div>
          <div class="preregistration-actions">
            <div class="preregistration-description">
              <h4>预登记优势</h4>
              <ul>
                <li>免费预登记，享受VIP待遇</li>
                <li>快速通道入场，节省时间</li>
                <li>专属商务对接服务</li>
                <li>展会资料和精美礼品</li>
              </ul>
            </div>
            <div class="action-buttons">
              <el-button
                type="primary"
                size="large"
                @click="$router.push('/visitor-preregistration')"
              >
                <el-icon><Edit /></el-icon>
                立即预登记
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 观众须知 -->
      <section
        id="visitor-notice"
        class="visitor-section"
        v-if="activeTab === 'visitor-system'"
      >
        <h2 class="section-title">观众须知</h2>
        <div class="notice-content">
          <div class="notice-info">
            <h3>参观须知</h3>
            <p>
              为了确保您能够顺利参观展会，请仔细阅读以下须知事项，包括入场要求、参观礼仪、安全须知等重要信息。
            </p>
            <div class="notice-items">
              <div class="notice-item">
                <el-icon><Document /></el-icon>
                <span>入场须知</span>
              </div>
              <div class="notice-item">
                <el-icon><User /></el-icon>
                <span>参观礼仪</span>
              </div>
              <div class="notice-item">
                <el-icon><Warning /></el-icon>
                <span>安全须知</span>
              </div>
              <div class="notice-item">
                <el-icon><Service /></el-icon>
                <span>服务设施</span>
              </div>
            </div>
          </div>
          <div class="notice-actions">
            <div class="notice-description">
              <h4>重要提醒</h4>
              <ul>
                <li>请携带有效身份证件</li>
                <li>遵守现场参观秩序</li>
                <li>注意个人财物安全</li>
                <li>配合现场工作人员指引</li>
              </ul>
            </div>
            <div class="action-buttons">
              <el-button
                type="primary"
                size="large"
                @click="$router.push('/visitor-notice')"
              >
                <el-icon><Document /></el-icon>
                查看详细须知
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 签证申请 -->
      <section
        id="visa-system"
        class="visitor-section"
        v-if="activeTab === 'visa-system'"
      >
        <h2 class="section-title">签证申请</h2>
        <div class="visa-content">
          <div class="visa-info">
            <h3>签证服务</h3>
            <p>
              为国际展商和观众提供便捷的签证申请服务，确保您能够顺利参加展会。我们与相关机构合作，提供专业的签证咨询和办理服务。
            </p>
            <div class="visa-services">
              <div class="service-item">
                <el-icon><Document /></el-icon>
                <span>签证咨询</span>
              </div>
              <div class="service-item">
                <el-icon><Document /></el-icon>
                <span>材料准备</span>
              </div>
              <div class="service-item">
                <el-icon><User /></el-icon>
                <span>申请代办</span>
              </div>
              <div class="service-item">
                <el-icon><Clock /></el-icon>
                <span>进度跟踪</span>
              </div>
            </div>
          </div>
          <div class="visa-actions">
            <div class="visa-description">
              <h4>服务内容</h4>
              <ul>
                <li>专业的签证政策咨询</li>
                <li>协助准备申请材料</li>
                <li>代为办理签证申请</li>
                <li>实时跟踪申请进度</li>
              </ul>
            </div>
            <div class="action-buttons">
              <el-button
                type="primary"
                size="large"
                @click="$router.push('/visa-system')"
              >
                <el-icon><Document /></el-icon>
                申请签证服务
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 展商名录 -->
      <section
        id="exhibitors-directory"
        class="visitor-section"
        v-if="activeTab === 'exhibitors-directory'"
      >
        <h2 class="section-title">展品商城</h2>
        <div class="directory-content">
          <div class="directory-info">
            <h3>参展商信息</h3>
            <p>
              汇集来自全球的顶尖机器人企业和创新技术公司，为观众提供全面的展商信息和产品展示。
            </p>
            <div class="directory-stats">
              <div class="stat-item">
                <span class="stat-number">{{ exhibitors.length }}</span>
                <span class="stat-label">参展企业</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">15+</span>
                <span class="stat-label">国家地区</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">500+</span>
                <span class="stat-label">展品数量</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">50+</span>
                <span class="stat-label">行业类别</span>
              </div>
            </div>
          </div>
          <div class="directory-actions">
            <div class="directory-description">
              <h4>展商特色</h4>
              <ul>
                <li>全球知名机器人企业</li>
                <li>最新技术产品展示</li>
                <li>专业的技术交流</li>
                <li>丰富的商务合作机会</li>
              </ul>
            </div>
            <div class="action-buttons">
              <el-button
                type="primary"
                size="large"
                @click="$router.push('/exhibitors-directory')"
              >
                <el-icon><List /></el-icon>
                查看展商名录
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 观众评语 -->
      <section
        id="visitor-reviews"
        class="visitor-section"
        v-if="activeTab === 'visitor-reviews'"
      >
        <h2 class="section-title">观众评语</h2>
        <div class="reviews-content">
          <div class="reviews-info">
            <h3>观众反馈</h3>
            <p>
              了解往届观众对展会的真实评价和反馈，分享他们的参观体验和收获。
            </p>
            <div class="reviews-gallery">
              <div
                class="review-item"
                v-for="review in visitorReviews"
                :key="review.id"
              >
                <div
                  class="review-image-section"
                  v-if="review.image || review.avatar"
                >
                  <img
                    :src="review.image || review.avatar"
                    :alt="review.name || '观众'"
                    class="review-image"
                  />
                </div>
                <div class="review-content-section">
                  <div class="review-header">
                    <div class="reviewer-details">
                      <h4 v-if="review.name">{{ review.name }}</h4>
                      <span v-if="review.company">{{ review.company }}</span>
                      <span v-if="review.position">{{ review.position }}</span>
                    </div>
                  </div>
                  <div class="review-content">
                    <div
                      v-html="review.content"
                      class="review-description"
                    ></div>
                  </div>
                  <div class="review-footer">
                    <span class="review-date">{{ review.date }}</span>
                    <span class="review-exhibition">{{
                      review.exhibition
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="reviews-actions">
            <div class="reviews-description">
              <h4>观众评价</h4>
              <ul>
                <li>技术交流收获丰富</li>
                <li>展品质量行业领先</li>
                <li>服务专业周到</li>
                <li>商务合作机会多</li>
              </ul>
            </div>
            <div class="action-buttons">
              <el-button
                type="primary"
                size="large"
                @click="$router.push('/visitor-reviews')"
              >
                <el-icon><Star /></el-icon>
                查看更多评语
              </el-button>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import {
  Van,
  House,
  Connection,
  Star,
  Edit,
  Clock,
  Present,
  Document,
  User,
  Warning,
  Service,
  List,
} from "@element-plus/icons-vue";
import { exhibitorApi, subpageApi } from "@/api/user";

export default {
  name: "Visitors",
  components: {
    Van,
    House,
    Connection,
    Star,
    Edit,
    Clock,
    Present,
    Document,
    User,
    Warning,
    Service,
    List,
  },
  setup() {
    // 当前激活的tab
    const activeTab = ref("group-visit");

    // 轮播图数据
    const carouselData = ref([]);

    // 设置激活的tab
    const setActiveTab = (tabName) => {
      activeTab.value = tabName;
    };

    // 处理轮播图按钮点击
    const handleCarouselAction = (action) => {
      if (action) {
        console.log("轮播图按钮点击:", action);
      }
    };

    // 加载轮播图数据
    const loadCarouselData = async () => {
      try {
        const response = await subpageApi.getContentByType("carousel_visitors");
        if (response && response.code === "200" && response.data) {
          carouselData.value = response.data
            .filter((item) => item.status === "active")
            .map((item) => {
              const content =
                typeof item.content === "string"
                  ? JSON.parse(item.content)
                  : item.content;
              return {
                id: item.id,
                title: item.title,
                subtitle: item.subtitle || "",
                description: content.description || "",
                image: item.imageUrl || content.image || "",
                buttonText: content.buttonText || "",
                action: content.action || "",
              };
            })
            .sort((a, b) => a.sort - b.sort);
        }
      } catch (error) {
        console.error("加载轮播图数据失败:", error);
      }
    };

    // 展商数据
    const exhibitors = ref([]);

    // 观众评语数据
    const visitorReviews = ref([]);

    // 解析富文本内容
    const parseContent = (content) => {
      if (!content)
        return {
          content: "",
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };

      try {
        if (typeof content === "string" && content.trim().startsWith("{")) {
          return JSON.parse(content);
        }
        return {
          content: content,
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };
      } catch (e) {
        return {
          content: content,
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };
      }
    };

    // 加载观众中心页面数据
    const loadVisitorData = async () => {
      try {
        // 加载展商名录数据
        const exhibitorsResponse = await exhibitorApi.getPublicExhibitorList();
        if (
          exhibitorsResponse &&
          exhibitorsResponse.code === "200" &&
          exhibitorsResponse.data
        ) {
          exhibitors.value = exhibitorsResponse.data;
        }

        // 加载观众评语数据
        const reviewsResponse = await subpageApi.getSubpageList(
          "visitors",
          "visitor-reviews"
        );
        if (
          reviewsResponse &&
          reviewsResponse.code === "200" &&
          reviewsResponse.data &&
          reviewsResponse.data.length > 0
        ) {
          visitorReviews.value = reviewsResponse.data.map((item, index) => {
            const parsed = parseContent(item.content);
            return {
              id: item.id || index + 1,
              name: item.title || "",
              company: parsed.company || "",
              position: parsed.position || "",
              content: parsed.content || item.content || "",
              avatar: item.imageUrl || parsed.avatar || "",
              image: item.imageUrl || parsed.avatar || "",
              date: parsed.date || new Date().toLocaleDateString(),
              exhibition: parsed.exhibition || "FAIR plus机器人全产业链接会",
            };
          });
        } else {
          // 使用默认数据
          visitorReviews.value = getDefaultVisitorReviews();
        }
      } catch (error) {
        console.error("加载观众中心数据失败:", error);
        visitorReviews.value = getDefaultVisitorReviews();
      }
    };

    // 默认观众评语数据
    const getDefaultVisitorReviews = () => {
      return [
        {
          id: 1,
          name: "李工程师",
          company: "智能制造研究院",
          position: "高级工程师",
          content:
            "<p>这次展会让我大开眼界，机器人技术的发展速度超出了我的想象。</p>",
          avatar:
            "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop",
          image:
            "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop",
          date: "2024-12-15",
          exhibition: "FAIR plus机器人全产业链接会",
        },
        {
          id: 2,
          name: "王经理",
          company: "自动化设备有限公司",
          position: "技术经理",
          content:
            "<p>展会的组织非常专业，展品质量很高，都是行业内的领先产品。</p>",
          avatar:
            "https://images.unsplash.com/photo-1565043589221-1a6fd9a6d0b8?w=400&h=300&fit=crop",
          image:
            "https://images.unsplash.com/photo-1565043589221-1a6fd9a6d0b8?w=400&h=300&fit=crop",
          date: "2024-12-14",
          exhibition: "FAIR plus机器人全产业链接会",
        },
      ];
    };

    onMounted(() => {
      loadVisitorData();
      loadCarouselData();
    });

    return {
      activeTab,
      setActiveTab,
      carouselData,
      handleCarouselAction,
      exhibitors,
      visitorReviews,
    };
  },
};
</script>

<style scoped>
.visitors {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

/* 顶部静态图片样式 */
.static-banner {
  margin-top: 0;
}
.banner-item {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  padding-top: 160px;
}
.banner-content {
  text-align: left;
  color: #fff;
  max-width: 100%;
}
.banner-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.banner-subtitle {
  font-size: 24px;
  margin-bottom: 15px;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.banner-description {
  font-size: 18px;
  margin-bottom: 30px;
  opacity: 0.8;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.visitor-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
}

.nav-item:hover {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.nav-item.active {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.visitor-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* 组团观展样式 */
.group-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.group-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9ff;
  border-radius: 8px;
  color: #667eea;
  font-weight: 500;
}

.group-actions {
  text-align: center;
}

.group-description h4,
.preregistration-description h4,
.notice-description h4,
.visa-description h4,
.directory-description h4,
.reviews-description h4 {
  color: #333;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.group-description ul,
.preregistration-description ul,
.notice-description ul,
.visa-description ul,
.directory-description ul,
.reviews-description ul {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.group-description li,
.preregistration-description li,
.notice-description li,
.visa-description li,
.directory-description li,
.reviews-description li {
  padding: 0.5rem 0;
  color: #666;
  position: relative;
  padding-left: 1.5rem;
}

.group-description li::before,
.preregistration-description li::before,
.notice-description li::before,
.visa-description li::before,
.directory-description li::before,
.reviews-description li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

/* 移除组团观展对勾，保留布局与样式 */
.group-description li::before {
  content: "";
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* 观众预登记样式 */
.preregistration-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.preregistration-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

/* 观众须知样式 */
.notice-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.notice-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.notice-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9ff;
  border-radius: 8px;
  color: #667eea;
  font-weight: 500;
}

/* 签证申请样式 */
.visa-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.visa-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9ff;
  border-radius: 8px;
  color: #667eea;
  font-weight: 500;
}

/* 展商名录样式 */
.directory-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.directory-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: #f8f9ff;
  border-radius: 8px;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: #667eea;
}

.stat-label {
  display: block;
  color: #666;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* 观众评语样式 */
.reviews-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.reviews-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.review-item {
  background: #f8f9ff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.review-image-section {
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.review-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-content-section {
  padding: 1rem;
}

.reviewer-details h4 {
  font-size: 1rem;
  color: #333;
  margin-bottom: 0.25rem;
}

.reviewer-details span {
  display: block;
  color: #666;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.review-description {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.5rem 0;
}

/* 富文本内图片限制（观众中心富文本块） */
.review-description :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid #eee;
  font-size: 0.8rem;
  color: #999;
}

.review-date {
  font-weight: 500;
}

.review-exhibition {
  font-style: italic;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .visitor-section {
    padding: 2rem;
    margin: 1rem 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .group-content,
  .preregistration-content,
  .notice-content,
  .visa-content,
  .directory-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .reviews-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .group-benefits,
  .preregistration-benefits,
  .notice-items,
  .visa-services,
  .directory-stats {
    grid-template-columns: 1fr;
  }

  .reviews-gallery {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
  }
}
</style>
